<!DOCTYPE html>
<html>
<head lang="en">
    <script src="js/jquery-3.2.1.js"></script>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin:0;padding:0}
        ul{list-style: none;line-height: 50px;}
        ul>li{display: inline-block;margin-right:20px;cursor: pointer}
        .box{
            text-align: center;
            width:400px;
            height:400px;
            margin-top:50px;
            border:1px solid #333;
            margin-left: auto;
            margin-right: auto;
        }
        #tab_content>div{
            position: absolute;
            width:100%;
            height:350px;
        }
        #tab_content{
            position: relative;
            height:350px;
            border-top: 1px solid #eee;
        }
        input{
            width:280px;
            height:40px;
            border:1px solid #eee;
            margin-top: 20px;
        }
        #tab_content>div:last-child{
            display: none;
        }
        .current{
            color:orange;
        }
    </style>
</head>
<body>
<div class="box">
    <ul id="tab">
        <li class="current">账号登录</li>
        <li>扫码登录</li>
    </ul>
    <div id="tab_content">
        <div>
            <p><input type="text" placeholder="请输入密码"/></p>
            <p><input type="password" placeholder="请输入密码"/></p>
        </div>
        <div>
            <img src="images/sao.png" alt=""/>
        </div>
    </div>
</div>
<script>
     var $lis = $("#tab>li");
     for(var i=0;i<$lis.length;i++){
         $lis[i].index=i;
     }
     $lis.click(function(){
         $(this).addClass("current").siblings().removeClass("current");
         $("#tab_content").children().hide().eq(this.index).show();
     });
</script>
</body>
</html>